<template>
  <div class="login-bg">
      <div class="item lb3" style="opacity: 1;"></div>
  </div>
  <div class="container-wrapper">
      <div class="login-container">
          <div class="row" style="padding-top:10px;margin-bottom:10px;">
              <form method="post" role="form" id="login" class="login-form fade-in-effect bv-form"
                    novalidate="novalidate">
                  <div class="login-header">
                      <a class="logo">
                          <img src="@/assets/images/login/zdy_logo.png" height="80" class="m-r-10 m-t-5">
                      </a>
                      <p class="sub-title">智电云智慧充电系统运营管理平台</p>
                  </div>

                  <LoginForm />
              </form>
              <!-- <LoginForm /> -->
          </div>
      </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { AppLogo } from '@/components/Application';
  import { AppLocalePicker } from '@/components/Application';
  import LoginForm from './LoginForm.vue';
  // import ForgetPasswordForm from './ForgetPasswordForm.vue';
  // import RegisterForm from './RegisterForm.vue';
  // import MobileForm from './MobileForm.vue';
  // import QrCodeForm from './QrCodeForm.vue';
  import { useGlobSetting } from '@/hooks/setting';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useDesign } from '@/hooks/web/useDesign';
  import { useLocaleStore } from '@/store/modules/locale';

  defineProps({
    sessionTimeout: {
      type: Boolean,
    },
  });

  const globSetting = useGlobSetting();
  const { prefixCls } = useDesign('login');
  const { t } = useI18n();
  const localeStore = useLocaleStore();
  const showLocale = localeStore.getShowPicker;
  const title = computed(() => globSetting?.title ?? '');
</script>
<style lang="less" scoped>
  @charset "utf-8";
/* CSS Document */
.page-body{width:100%;height:100%;padding:0;margin:0;}
.login-bg{width:100%;height:100%;} 
.login-bg .item{position:absolute;width:100%;height:100%;transition:1s;background-size: cover;}
.login-bg .lb3{background:url(@/assets/images/login/login-bg3.jpg) no-repeat;background-size: cover;}
.container-wrapper{display:table;display: table;height: 100%;left: 0;position: fixed;text-align: center;top: 0;width: 100%;z-index: 2;}
.login-container .row{width:420px;padding:30px;margin:0 auto;background:#fff;box-shadow:0px 0px 50px 10px rgba(0, 0, 0, 0.1);border-radius:20px;}
.login-container{display: table-cell;text-align: center;vertical-align: middle;}
.login-container .login-header{width:100%;text-align:center;border-bottom:1px solid #eee;margin:10px 0 30px 0;}
.login-container .login-header .logo{display:inline-block;width:100%;text-align:center;margin-bottom:10px;}
.login-container .login-header .logo img{margin:0 auto;max-width:336px;}
.login-container .login-header .sub-title{font-size:16px;color:#888;line-height:35px;}

.login-container .row .form-group{margin-bottom:25px;}
.login-container .row .form-group .help-block{width:100%;text-align:left;}
.login-container .row .form-group .form-control{height:44px;line-height:14px;padding:15px 15px;color:#333;}
.login-container .btn{font-size:16px;padding:12px;}
</style>
